<template>
	<view class="team">
		<view class="uni-flex">
			<view class="flex-item" :class="{ active: active == 0 }" @click="cut(0)"><text>团队{{datalist.groupTotal}}人</text></view>
			<view class="flex-item" :class="{ active: active == 1 }" @click="cut(1)"><text>合伙{{datalist.partnerGroupTotal}}人</text></view>
			<view class="flex-item" :class="{ active: active == 2 }" @click="cut(2)"><text>无效{{datalist.invalidGroupTotal}}人</text></view>
		</view>
		<view class="list" v-show="active == 0">
			
			<view class="baselv">
				<view class="ul">
					<view class="li">
						<view class="msg" @tap="onetree">
							<image src="/static/img/logo2.png" class="portrait" />
							<image src="/static/img/bottom.png" class="icon" :class="{ avtive:fold}" v-if="treedata.children" />
							<text class="name">{{treedata.agentName}}</text><text class="lv">{{treedata.agentLevel}}</text>
						</view>
						<view class="number">编号：{{treedata.agentSn}} 手机号{{treedata.mobile}}</view>
						<view class="sublevel" v-if="fold">
							<view class="list" v-for="(item, index) in treedata.children" :key="index">
								<view class="msg" @click.stop="openExpand(item)">
									<image src="/static/img/logo2.png" class="portrait" />
									<image src="/static/img/bottom.png" class="icon" :class="{ avtive:item.isExpand}" v-if="item.children.length>0"/>
									<text class="name">{{item.agentName}}</text>
									<text class="lv">{{item.agentLevel}}</text>
								</view>
								<view class="number">编号：{{item.agentSn}} 手机号{{item.mobile}} </view>
								<view class="sublevel" v-if="item.isExpand">
									<view class="list" v-for="(item1, index) in item.children" :key="index">
										<view class="msg" @click.stop="openExpand(item1)">
											<image src="/static/img/logo2.png" class="portrait" />
											<image src="/static/img/bottom.png" class="icon" :class="{ avtive:item1.isExpand}" v-if="item1.children.length>0"/>
											<text class="name">{{item1.agentName}}</text>
											<text class="lv">{{item1.agentLevel}}</text>
										</view>
										<view class="number">编号：{{item1.agentSn}} 手机号{{item1.mobile}}</view>
										<view class="sublevel" v-if="item1.isExpand">
											<view class="list" v-for="(item2, index) in item1.children" :key="index">
												<view class="msg">
													<image src="/static/img/logo2.png" class="portrait" />
													
													<text class="name">{{item2.agentName}}</text>
													<text class="lv">{{item2.agentLevel}}</text>
												</view>
												<view class="number">编号：{{item2.agentSn}} 手机号{{item2.mobile}}</view>
											</view>
											
										</view>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view v-if="treedata.length==0" class="notavailable">
					<image src="../../../static/img/notavailable.png" mode="widthFix"></image>
					<view class="nottext">暂时没有数据</view>
				</view>
			</view>
		</view>
		<view class="list list1" v-show="active == 1">
			<view class="baselv">
				<view class="ul">
					<view class="li" v-for="(item, index) in partner" :key="index">
						<view class="msg">
							<image src="/static/img/logo2.png" class="portrait" />
							<text class="name">{{item.agentName}}</text>
							<text class="right">{{item.agentLevel}}</text>
						</view>
						<view class="number">编号：{{item.agentSn}}</view>
					</view>
				</view>
				
				<view v-if="partner.length==0" class="notavailable">
					<image src="../../../static/img/notavailable.png" mode="widthFix"></image>
					<view class="nottext">暂时没有数据</view>
				</view>
			</view>
		</view>
		<view class="list list1" v-show="active == 2">
			<view class="baselv">
				<view class="ul">
					<view class="li" v-for="(item, index) in invalid" :key="index">
						<view class="msg">
							<image src="/static/img/logo2.png" class="portrait" />
							<text class="name">{{item.agentName}}</text>
						</view>
						<view class="number">编号：{{item.agentSn}}</view>
					</view>
				</view>
				
				<view v-if="invalid.length==0" class="notavailable">
					<image src="../../../static/img/notavailable.png" mode="widthFix"></image>
					<view class="nottext">暂时没有数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { uniIcons } from '@dcloudio/uni-ui';
import team from '../../../servers/agent/team/team.js'
export default {
	components: { uniIcons },
	data() {
		return {
			active: 0,
			treedata:'',
			fold:false,
			datalist:'',
			partner:'',
			invalid:'',
		};
	},
	created() {
		this.tree();
	},
	methods: {
		cut(e) {
			this.active = e;
		},
		openExpand(item) {
			item.isExpand=!item.isExpand
		},
		onetree() {
			this.fold = !this.fold;
		},
		tree(){
			uni.showLoading({
				title:'数据加载中'
			})
			team.tree().then(res => {
				 
				if(res.data){
					uni.hideLoading();
					this.datalist=res.data;
					console.log(res.data,this.datalist.groupTotal)
					this.treedata=res.data.groupTree;
					this.partner=res.data.partnerGroup;
					this.invalid=res.data.invalidGroup;
					if(res.data.groupTree.children){
						this.treedata.children = res.data.groupTree.children.map((m, i) => {
							// m.isExpand = m.isExpand || false
							m.children = m.children || []
							if (m.isExpand) {
								this.$set(m, 'isExpand', m.isExpand)
							} else {
								this.$set(m, 'isExpand', false)
							}
							
							if (m.children.length > 0) {
								m.children = m.children.map((m, i) => {
									// m.isExpand = m.isExpand || false
									m.children = m.children || []									
									if (m.isExpand) {
										this.$set(m, 'isExpand', m.isExpand)
									} else {
										this.$set(m, 'isExpand', false)
									}
									return m;
								})
							}
							return m;
						})
					}
					
				}
					
					
				})
				.catch(err => {
					console.log(err)
					console.log(new Error('请检查网络后重试'));
				});
		},
		
	}
};
</script>

<style lang="less" scoped>
.team {
	padding-top: 89rpx;

	.uni-flex {
		position: fixed;
		z-index: 1;
		top: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		box-shadow: 5rpx 0px 20rpx #c5c5c5;
		background: #ffffff;
		.flex-item {
			font-size: 28rpx;
			font-weight: 900;
			width: 33.33%;
			height: 89rpx;
			text-align: center;
			line-height: 89rpx;
		}
		.flex-item.active {
			text {
				color: #bd3c8c;
				border-bottom: 3rpx solid #bd3c8c;
			}
		}
	}
	.list {
		.top {
			background: #ffffff;
			padding: 46rpx 20rpx;
			display: flex;
			flex-direction: row;
			line-height: 84rpx;
			.title {
				font-size: 30rpx;
			}
			.input {
				width: 430rpx;
				border-radius: 10rpx;
				box-shadow: 5rpx 0px 20rpx #c5c5c5;
				margin: 0 27rpx 0 18rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				height: 84rpx;
			}
			.button {
				height: 84rpx;
				line-height: 84rpx;
				padding: 0rpx 20rpx;
				text-align: center;
				color: #ffffff;
				border-radius: 10rpx;
				font-size: 28rpx;
				background: #bd3c8c;
			}
		}
		.baselv {
			.ul {
				background: #ffffff;
				.li {
					.msg {
						position: relative;
						font-size: 30rpx;
						padding: 52rpx 0 0 163rpx;
						.portrait {
							position: absolute;
							left: 20rpx;
							width: 110rpx;
							height: 110rpx;
							border-radius: 50%;
						}
						.icon {
							position: absolute;
							right: 20rpx;
							width: 26rpx;
							height: 22rpx;
							transform: rotate(-180deg);
						}
						.icon.avtive {
							transform: rotate(0deg);
						}
						.name {
							margin-right: 30rpx;
						}
						.right {
							margin-right: 20rpx;
						}
					}
					.number {
						font-size: 28rpx;
						color: #999999;
						margin-top: 28rpx;
						padding: 0rpx 20rpx 46rpx 163rpx;
					}
					.sublevel {
						background: #f5e2ee;
						.msg {
							padding-left: 213rpx;
							color: #bd3c8c;
							.portrait {
								left: 72rpx;
							}
						}
						.number {
							padding-left: 213rpx;
							color: #e08ec1;
						}
						.sublevel {
							background: #f9f0f5;
							.msg {
								padding-left: 263rpx;
								.portrait {
									left: 122rpx;
								}
							}
							.number {
								padding-left: 263rpx;
								color: #e08ec1;
							}
							.sublevel {
								background: #f9f0f5;
								.msg {
									padding-left: 300rpx;
									.portrait {
										left: 180rpx;
									}
								}
								.number {
									padding-left: 300rpx;
									color: #e08ec1;
								}
							}
						}
					}
				}
			}
		}
	}
	.list1 {
		.li {
			border-bottom: 1px solid #e1e1e1;
		}
		.li:nth-last-child(1) {
			border-bottom: none;
		}
	}
}
</style>
